perf(auth): static gradient + shared one-shot orbs across all auth pages#218
Merged
ahmetabdullahgultekin merged 1 commit intoJun 12, 2026
Merged
Conversation
The 7 standalone auth shells (Register, SecondaryAuthFlow, VerifyEmail, ResetPassword, Onboarding, AcceptInvite, ForgotPassword) each carried a byte-identical copy of the login-page jank anti-pattern that PR #217 already removed from LoginPage: - an infinite `gradientShift` keyframe animation over `backgroundSize: 400% 400%`, which animates `background-position` and so forces a full-viewport REPAINT every frame (main-thread when HW-accel is off); and - decorative `FloatingShape` orbs that ran an INFINITE framer-motion loop with a per-frame `backdrop-filter: blur(10px)`. Fix (presentational/perf only, behaviour-preserving): - Replace every inline animated-gradient `sx` block with the shared `loginShellBackgroundSx()` (static brand gradient, same stops) from loginBackground.ts. The `@keyframes gradientShift` are deleted. - Extract ONE shared decorative-orb component, `features/auth/components/FloatingShape.tsx` — the cheap ONE-SHOT fade/scale-in with a soft radial fill and no animated backdrop-blur (the target version LoginPage already shipped). LoginPage and all 7 pages now import it and their local inline `FloatingShape` definitions are removed (8 duplicate copies -> 1). - Gate the orbs behind `!usePrefersReducedMotion()` on every page that renders them, matching LoginPage. Each page keeps its exact colours, layout, glass-card `blur(20px)`, and orb positions/sizes/delays. Orb counts are preserved (5 on most; VerifyEmail keeps its 4; SecondaryAuthFlow renders none and only had an unused FloatingShape def + the animated gradient, both removed). Net -196 LOC across the 8 files plus the one shared component. Verified: tsc --noEmit clean, eslint clean on all changed files, vitest src/features/auth + src/pages 395/395 green, vite build OK.
ahmetabdullahgultekin
deleted the
perf/auth-pages-static-gradient-2026-06-12
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
PR #217 (
c8c017d) removed the login-page jank anti-pattern fromLoginPage. The 7 other auth shells each carried a byte-identical copy of it, so the same jank persists on register / MFA / verify-email / reset / onboarding / accept-invite / forgot-password. This PR fixes all 7 and eliminates the resulting DRY violation.The anti-pattern (per page)
gradientShiftkeyframe overbackgroundSize: '400% 400%'. Animatingbackground-positioncannot be GPU-composited → a full-viewport repaint every frame (on the main thread when hardware-acceleration is off).FloatingShapeorbs each ran an INFINITE framer-motion loop with a per-framebackdrop-filter: blur(10px)— continuous main-thread compositing cost.The fix (presentational / perf only — behaviour-preserving)
sxblock with the sharedloginShellBackgroundSx()(static brand gradient, identical stops) fromloginBackground.ts; the dead@keyframes gradientShiftare removed.src/features/auth/components/FloatingShape.tsx— the cheap one-shot fade/scale-in (opacity 0→0.28,scale 0.8→1,duration 1.2,ease easeOut) with a soft radial fill and no animated backdrop-blur (exactly the versionLoginPagealready shipped in perf(login): static shell gradient — fix general dashboard login jank #217).LoginPageand all 7 pages now import it; their local inlineFloatingShapedefinitions are deleted (8 duplicate copies → 1).!usePrefersReducedMotion()on every page that renders them, matchingLoginPage.Each page keeps its exact colours, layout, glass-card
backdrop-filter: blur(20px)(cheap over a now-static gradient; none of these pages has a live camera step), and orb positions/sizes/delays.Reversibility
Pure presentational change. The static-gradient builder lives in
loginBackground.ts(restore thegradientShiftanimation there to revert); the orb component is a single file.Orb counts preserved (proof)
FloatingShapedef + the animated gradient — both removed; renders no orbs)Files changed
src/features/auth/components/FloatingShape.tsx(shared one-shot orb)src/features/auth/components/LoginPage.tsx(migrated to shared orb; output identical)src/features/auth/components/RegisterPage.tsxsrc/features/auth/components/SecondaryAuthFlow.tsxsrc/pages/VerifyEmailPage.tsxsrc/pages/ResetPasswordPage.tsxsrc/pages/OnboardingPage.tsxsrc/pages/AcceptInvitePage.tsxsrc/pages/ForgotPasswordPage.tsxNet -196 LOC across the 8 files + the one shared component.
Verification
npx tsc --noEmitnpx eslint <9 changed files>npx vitest run src/features/auth src/pagesnpx vite build